const { resolve } = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin');
const TerserWebpackPlugin = require('terser-webpack-plugin');

module.exports = {
    entry: './src/js/index.js',
    output: {
        filename: '[name].build.js',
        path: resolve(__dirname, 'build'),
    },
    // loader 配置
    module: {
        rules: [
            // loader 的配置
            {
                test:/\.css$/,
                use:['style-loader','css-loader'],
            },
            //一下配置只会匹配一个
            {
                oneOf:[]
            },
        ]
    },
    plugins: [
        new HtmlWebpackPlugin(),
    ],
    // mode: 'development', // 开发模式
    mode: 'production', // 生产模式
    // 解析模块的规则
    resolve:{
        // 配置解析模块路径别名：优点 简写路径 缺点 路径没有提示
        alias:{
            // 这样的话就相当于在 import 时就可以少些路径了，以前【import '../css/index.css'】  然后配置了这个就可以写成这样了 【import '$css/index.css'】
            $css:resolve(__dirname,'src/css'),
        },
        // 可以省略 import 时的后缀，比如以前是 【import '../css/index.css'】 配置了这个就可以写成 【import '../css/index'】 了，这样要注意文件名字不能一样，不然容易弄错（当在同一个文件夹下的js和css有同名的文件时）
        // extensions:['.js','.json','.css'],
        // 告诉 webpack node_modules 的文件夹路径在哪里
        modules:[resolve(__dirname,'../../node_modules','node_modules')]
    },
    optimization:{
        splitChunks:{
            chunks:'all',
            /*
            // 这下面的一般不会自己写，都使用默认的
            minSize: 30 * 1024, // 分割的chunk最小为30kb
            maxSize: 0, // 最大没有限制
            minChunks:1 , //要提取的chunk最少被引用一次
            maxAsyncRequests:5, //按需加载是并行加载的文件的最大数量
            maxInitialRequests:3,
            automaticNameDelimiter:'~', // 名称连接符
            name:true, //可以使用命名规则
            cacheGroups:{
                // node_modules 文件会被打爆到vendors组的chunk中。--> venders~XXX.js
                // 满足上面的公共规则，比如：大小大于30Kb，至少被引用1次
                vendors:{
                    test: /[\\/]node_modules[\\/]/,
                    // 优先级
                    priority:-10
                },
                default:{
                    // 要提取的chunk至少被引用2次
                    minChunks:2,
                    // 优先级
                    priority:-20,
                    // 如果当前要打包的模块，和之前已经被提取的模块是同一个就会复用，而不是从新打包模块
                    reuseExistingChunk:true,
                }
            }
            // */
        },
        // 解决修改a文件后导致b文件的contenhash变化导致打包缓存失效
        runtimeChunk:{
            // 将当前模块的记录其它模块的hash单独打包为一个文件 runtime
            name:entrypoint => `runtime-${entrypoint.name}`
        },
        minimizer:[
            // 配置生产环境的压缩方案： js和css
            new TerserWebpackPlugin({
                // 开启缓存
                cache:true,
                // 开启多线程打包
                parallel:true,
                // 启动source-map
                sourceMap:true,
            })
        ],
    }

}